<template>
   <div class="container">
      <div class="box">
         <div class="top">
            <div>
               <van-icon name="share" size="30px" @click="fanhui" />
               <span>课程准备</span>
            </div>
         </div>
         <div class="content">
            <div class="content-top">
               <div>
                  <div class="top-left">
                     <p>{{ teacherdata.text1 }}</p>
                     <p>{{ teacherdata.text2 }}</p>
                     <p>{{ teacherdata.text3 }}</p>
                  </div>
                  <div class="top-bottom">
                     <img :src="teacherdata.avatar" />
                     <span>{{ teacherdata.user }}</span>
                  </div>
               </div>
               <div class="top1"></div>
               <div></div>
            </div>
            <van-row>
               <van-col span="3">序</van-col>
               <van-col span="7">学生姓名</van-col>
               <van-col span="7">签到状态</van-col>
               <van-col span="7">操作</van-col>
            </van-row>
         </div>
         <div class="bottom">
            <van-row v-for="item in kechengdata">
               <van-col span="3">{{ item.id }}</van-col>
               <van-col span="7">{{ item.name }}</van-col>
               <van-col span="7">未开始</van-col>
               <van-col span="7">
                  <span class="span-kaishi">未开始</span>
               </van-col>
            </van-row>
         </div>
      </div>
   </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount } from 'vue'
import { kechengApi } from '@/api/adminAPi';
import adminStore from '@/store/admin'
import { useRouter } from 'vue-router';
const router = useRouter();
const myadminStore = adminStore()
const kechengdata = ref([])
const teacherdata = ref({})
onBeforeMount(async () => {
   myadminStore.setUserInfo(false)
   let ret = await kechengApi()
   if (ret.code === 0) {
      kechengdata.value = ret.data
      teacherdata.value = ret.teacher
   }
})
const fanhui = () => {
   router.push('/');
   myadminStore.setUserInfo(true)
}
</script>
<style lang='scss' scoped>
.span-kaishi {
   padding: 3px 8px;
   background-color: #E6E9ED;
   color: white;
   border-radius: 5px;
}

.container {

   .box {
      padding: 10px;

      .top {
         position: sticky;
         top: 0;
         background-color: #FFFFFF;

         div {
            height: 50px;
            display: flex;
            align-items: center;

            z-index: 1;
            opacity: 1;

            .van-icon {
               transform: scaleX(-1);
            }

            span {
               font-size: 20px;
               font-weight: 600;
            }
         }
      }

      .content {
         .content-top {
            width: 95%;
            height: 150px;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            padding: 10px 8px;
            background-color: white;
            margin-bottom: 30px;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

            div {
               &:nth-child(1) {
                  .top-left {
                     display: flex;
                     flex-direction: column;

                     p {
                        &:nth-child(1) {
                           font-size: 25px;
                           font-weight: 600;
                           color: white;
                           z-index: 2;
                        }

                        &:nth-child(2),
                        &:nth-child(3) {
                           font-size: 18px;
                           color: #BDC3C3;
                           margin-top: 10px;
                        }
                     }
                  }

                  .top-bottom {
                     display: flex;
                     align-items: center;
                     margin-bottom: 70%;
                     margin-top: 20px;

                     img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                     }

                     span {
                        font-size: 18px;
                        margin-left: 5px;
                     }
                  }
               }

               &:nth-child(3) {
                  width: 200px;
                  height: 100px;
                  background-color: #F9DF71;
                  position: absolute;
                  right: -60px;
                  bottom: -50px;
                  border-radius: 50%;
                  z-index: 1;
               }
            }

            .top1 {
               width: 200px;
               height: 100px;
               background-color: #30E2F2;
               position: absolute;
               left: -20px;
               top: -50px;
               border-radius: 50%;
               z-index: 1;
            }
         }

         .van-row {
            background-color: #6CB6FF;
            font-size: 18px;
            color: #e8dddd;
            height: 50px;
            font-weight: 500px;
            position: sticky;
            top: 60px;
            z-index: 3;

            :deep(.van-col) {
               display: flex;
               justify-content: center;
               align-items: center;
            }
         }
      }

      .bottom {
         .van-row {
            font-size: 18px;
            color: black;
            height: 50px;
            font-weight: 500px;

            :deep(.van-col) {
               display: flex;
               justify-content: center;
               align-items: center;
            }

            &:nth-child(even) {
               background-color: #E9F4FF;
            }
         }
      }
   }
}
</style>